import React from "react";
import { Swiper, Toast } from "antd-mobile";
import img2 from "../image/2.jpg";

interface PopularProps { }

const Popular: React.FC<PopularProps> = () => {
    // 定义图片数组类型
    const colors: string[] = [img2, img2, img2, img2];

    // 处理轮播图索引变化
    const handleIndexChange = (index: number) => {
        // console.log(index, "onIndexChange1");
    };

    // 处理卡片点击
    const handleCardClick = (index: number) => {
        Toast.show(`你点击了卡片 ${index + 1}`);
    };

    return (
        <div>
            {/* 标题栏 */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '0rem 0 0.1rem 0' }}>
                <h5 style={{ fontSize: '0.16rem' }}>流行趋势</h5>
                <h5 style={{ fontSize: '0.1rem', color: "rgb(113,113,247)" }}>查看全部</h5>
            </div>

            {/* 轮播组件 */}
            <div>
                <Swiper
                    loop
                    autoplay
                    onIndexChange={handleIndexChange}
                    style={{ borderRadius: "0.1rem" }}
                >
                    {colors.map((item, index) => (
                        <Swiper.Item key={index}>
                            <div onClick={() => handleCardClick(index)} style={{ position: "relative" }}>
                                <img src={item} alt="" width="100%" />
                                <div style={{ position: "absolute", bottom: "0.1rem", left: "0.1rem", right: "0.1rem", color: "white", padding: "0.05rem 0" }}>
                                    <p style={{ fontSize: "0.15rem" }}>微晶磨皮术</p>
                                    <small>2024 年 9 月 21 日</small>
                                </div>
                            </div>
                        </Swiper.Item>
                    ))}
                </Swiper>
            </div>
        </div>
    );
};

export default Popular;